<template>
  <ul class="ipAdress clearfix">
      <li v-for="(item,index) in ipAddress">
          <input ref="ipInput" v-model="item.value" type="text" class="ipInputClass" @input="checkIpVal(item)" @keyup="turnIpPosition(item,index,$event)"/>
          <div></div>
      </li>
  </ul>
</template>

<script>
import {deepClone} from '@/utils/m7Utils'
export default {
  props: {
      valueData: {
          type: String,
          default: ''
      }
  },
  data() {
      return {
          ipAddress: [
              {
                  value: ''
              },{
                  value: ''
              },{
                  value: ''
              },{
                  value: ''
              }
          ]
      }
  },
  watch: {
      ipAddress: {
          handler: function (newVal, oldVal) {
              let str = ''
              for (const i in this.ipAddress) {
                  str += this.formatter(this.ipAddress[i].value)
              }
              if (str === '000000000000') {
                  str = ''
              }
              this.$emit('input', str)
          },
          deep: true
      }
  },
  methods: {
      // 格式化补零方法
      formatter(val) {
          let value = val.toString()
          if (value.length === 2) {
              value = '0' + value
          } else if (value.length === 1) {
              value = '00' + value
          } else if (value.length === 0) {
              value = '000'
          }
          return value
      },
      // 检查ip输入为0-255
      checkIpVal(item) {
          //确保每个值都处于0-255
          let val = item.value;
          // 处理非数字
          val = val.toString().replace(/[^0-9]/g,'');
          val = parseInt(val, 10);
          if(isNaN(val)) {
              val = ''
          } else {
              val = val < 0 ? 0 : val;
              val = val > 255 ? 255 : val;
          }
          item.value = val;
      },
      // 光标位置判断
      turnIpPosition(item, index, event) {
          let self = this;
          let e = event || window.event;
          if (e.keyCode === 37) { // 左箭头向左跳转，左一不做任何措施
              if(index !== 0 && e.currentTarget.selectionStart === 0) {
                  self.$refs.ipInput[index - 1].focus();
              }
          } else if (e.keyCode == 39) { // 右箭头向右跳转，右一不做任何措施
              if(index !== 3 && e.currentTarget.selectionStart === item.value.toString().length) {
                  self.$refs.ipInput[index + 1].focus();
              }
          } else if (e.keyCode === 8) { // 删除键把当前数据删除完毕后会跳转到前一个input，左一不做任何处理
              if(index !== 0 && item.value === '') {
                  self.$refs.ipInput[index - 1].focus();
              }
          } else if (e.keyCode === 13 || e.keyCode === 32 || e.keyCode === 190) {// 回车键、空格键、冒号均向右跳转，右一不做任何措施
              if(index !== 3) {
                  self.$refs.ipInput[index + 1].focus();
              }
          } else if (item.value.toString().length === 3) { // 满3位，光标自动向下一个文本框
              if(index !== 3) {
                  self.$refs.ipInput[index + 1].focus();
              }
          }
      }
  },
  beforeMount () {
    var arr = []
    var str = deepClone(this.valueData)
    if (str && str.length && str !== 'undefined') {
      arr = str.split('.')
    }
    if (arr.length === 4) {
      for (var i = 0; i < 4;i++) {
        this.ipAddress[i].value = arr[i]
      }
    } else {
      this.ipAddress = [
          {
              value: ''
          },{
              value: ''
          },{
              value: ''
          },{
              value: ''
          }
      ]
    }
  }
}
</script>
<style type="text/css" scoped>
  .ipAdress{
      display: flex;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      width: 196px;
      height: 30px;
      line-height: 30px;
      padding-inline-start: 0px;
      float: left;
  }
  .ipAdress li{
      position: relative;
      height: 26px;
      margin: 0;
      list-style-type: none;
  }
  .ipInputClass{
      border: none;
      width: 49px;
      height: 23px;
      text-align: center;
      background: transparent;
  }
  .ipAdress li div{
      position: absolute;
      bottom: 8px;
      right: 0;
      border-radius: 50%;
      background: #505050;
      width: 2px;
      height: 2px;
  }
  .ipAdress li:last-child div{
      display: none;
  }
  .ipAdress input:focus{
      outline: none;
  }
</style>